<template>
	<view class="interal">
		<!-- 个人积分总数 -->
		<view class="interal-header">
			<text class="m-top">{{interalData.username }}总积分</text>
			<text class="m-bottom">{{interalData.Integral }}</text>
		</view>
		<view class="interal-check" @tap="nav('/subpackage/storehouse/pages/worker/ranking/index?funtype=jf_sum')">
			查看排行榜>>
		</view>
		<!-- count-box -->
		<view class="interal-count">
			<view class="count-item" v-for="(item,index) in tabs" :key="index">
				<view class="count-item-text">
					{{item.title}}
				</view>
				<view class="count-item-text">
					{{interalData[item.key] ||0 }}
				</view>
			</view>
		</view>
		<!-- 进度 -->
		<view class="interal-progress">
			<view class="progress-item" v-for="(item,index) in interalData.fieldList" :key="index">
				<view class="progress-text">
					{{item.text}}
				</view>
				<u-line-progress style="position: relative;" height="30rpx" :percentage="getProgress(item,interalData)"
					activeColor="#0a3fd5">
					<view slot-scope="{width}" class="progressTips"
						:style="{left:getLeft(width,interalData[item.name])}">
						{{interalData[item.name]}}分
					</view>
				</u-line-progress>
				<view class="progress-text">
					{{item.tips}}
				</view>
			</view>

		</view>
		<!-- 富文本 -->
		<u-parse style="padding: 24rpx 36rpx 24rpx" :content="interalData.footer_tips"></u-parse>
	</view>
</template>

<script>
	import {
		getUserMonthInfo
	} from "@/api"
	export default {
		onLoad() {
			this.getData()
		},
		data() {
			return {
				interalData: {},
				tabs: [{
					title: '个人单量',
					key: 'Ordernumber'
				}, {
					title: '个人总业绩',
					key: 'profit'
				}, {
					title: '城市平均单量',
					key: 'OrdernumberCity'
				}, {
					title: '城市平均业绩',
					key: 'ProfitCity'
				}]
			}
		},
		methods: {
			getLeft(left, number) {
				return `calc(${left} - 50rpx)`
			},
			getProgress({
				max,
				name: key
			}, data) {
				let progress = Number(data[key]) / max
				progress = progress < 0 ? 0 : progress.toFixed(2)
				return progress * 100
			},
			async getData() {
				const {
					data: interalData,
					code
				} = await getUserMonthInfo()
				if (code === 1) {
					this.interalData = interalData
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.interal {
		position: relative;


		&-header {
			background: #66d88d;
			color: #fff;
			padding: 30rpx 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.m-bottom {
				font-weight: bold;
				font-size: 70rpx;
			}
		}

		&-check {
			position: absolute;
			color: #fff;
			top: 20rpx;
			right: 20rpx;
			font-size: 12px;
		}

		&-count {
			padding: 26rpx 24rpx;
			background: #75f19c;
			box-shadow: 0px -2rpx 2rpx 0px #75f19c;
			display: flex;

			.count-item {
				display: flex;
				width: 25%;
				flex-direction: column;
				justify-content: center;
				color: #fff;
				text-align: center;

				&-text {
					&:first-child {
						font-size: 14px;
						margin-bottom: 10rpx;
					}

					&:nth-child(2) {
						font-weight: bold;
						font-size: 40rpx;
					}
				}
			}
		}

		&-progress {
			padding: 36rpx 24rpx;

			.progress-item {
				display: flex;
				align-items: center;
				font-size: 14px;
				color: #007aff;
				margin: 100rpx 0;
				top: -60rpx;

				.progress-text {
					&:first-child {
						width: 60rpx;
					}

					&:last-child {
						width: 124rpx;
					}

				}
			}
		}
	}

	.progressTips {
		position: absolute;
		width: 100rpx;
		background-color: #050e4f;
		color: #fff;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		top: -80rpx;
		border-radius: 20rpx;

		&:before {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border-left: 15rpx solid transparent;
			border-right: 15rpx solid transparent;
			border-top: 15rpx solid #050e4f;
			bottom: -12rpx;

		}
	}

	::v-deep.u-line-progress {
		overflow: inherit
	}
</style>